<template>
  <view class="dict-tag">
    <text :style="{ color: color }">{{ label }}</text>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  value: {
    type: [String, Number],
    default: ''
  },
  color: {
    type: String,
    default: ''
  }
});

const label = computed(() => {
  const option = props.options.find(item => item.value === props.value);
  return option ? option.label : props.value;
});

const color = computed(() => {
  const option = props.options.find(item => item.value === props.value);
  return option ? option.color : props.color;
});
</script>

<style scoped>
.dict-tag {
  display: inline-block;
  padding: 2rpx 12rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
  line-height: 1.5;
}
</style> 